<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <view class="content-box">
            <view></view>
            <view v-if="!isEmpty" class="u-m-t-20">

                <view class="collect-list" v-for="(goods, index) in myGroupList" :key="index">

                    <u-swipe-action class="choujiangs" :index="goods.id"
                                    :disabled="true"
                                    :options="options1"
                    >
                        <view class="zixun-item u-flex u-flex-col u-p-20 u-m-t-20">
                            <view class="u-flex u-row-between u-col-center u-w-100s u-m-b-20" @click="openPopup()">
                                <view class="u-flex u-row-left" style="width: 78%;">
                                    <view class="user_img u-m-r-10"></view>
                                    <view class="zixuntitle u-ellipsis-1">{{ "100个仰卧起坐" }}</view>
                                </view>
                                <view class="tag u-m-l-10 font-green" v-if="goods.position"
                                      style="border-color:#3FA897 "
                                      @click.stop="jump('/pages/kehu/shouhuanguanliDetail',{id:goods.id})"
                                >
                                    学生名单
                                </view>
                            </view>
                            <view class="task-list u-flex u-row-between u-col-center u-m-t-10 u-w-100s"  @click="openwanchengPopup()">
                                <view class="task-list-items u-ellipsis-1">体测项目</view>
                                <view class="task-list-items u-ellipsis-1">任务模式</view>
                                <view class="task-list-items u-ellipsis-1">考核标准</view>
                            </view>
                            <view class="task-list u-flex u-row-between u-col-center u-m-t-20 u-m-b-20 u-w-100s u-p-b-20" style="border-bottom: 2rpx solid #f9f9f9">
                                <view class="task-list-item u-flex u-row-center u-col-center">班级名称</view>
                                <view class="task-list-item u-flex u-row-center u-col-center">班级人数</view>
                                <view class="task-list-item u-flex u-row-center u-col-center">已绑手环人数</view>
                            </view>

                            <view class="u-flex u-row-between u-w-100s">
                                <view class="zixuntime u-p-t-10 u-p-b-10">集体开关:</view>
                                <view class="u-m-l-10">
                                    <u-switch v-model="goods.checked" active-color="#3FA897" inactive-color="#ccc"></u-switch>
                                </view>
                                <!--                                <view class="yichu"></view>-->
                            </view>
                        </view>
                        <template v-slot:right>
                            <view @click="showDetel=true;chengyuanItem=goods" class="detlebtn u-flex u-row-center u-col-center">
                                <u-icon name="trash" size="44">删除</u-icon>
                            </view>
                        </template>
                    </u-swipe-action>
                </view>
            </view>

            <u-popup v-model="showModal" mode="bottom" :closeable="true" close-icon-pos="top-right">
                <view class="modal-box page_box">
                    <view class="modal-head u-flex u-row-center">
                        <text class="head-title">员工岗位</text>
                    </view>
                    <view class="modal-content content_box y-f u-flex u-flex-wrap u-col-top u-m-t-30 u-m-b-100">
                        <view class="into-item u-flex u-row-between u-m-t-20" v-for="g in tagList" :key="g" :class="position==g?'active':''" @click="choosetag(g)">
                            <view class="u-flex">
                                <text class="into-name">{{ g }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="modal-foot u-flex u-row-center u-col-center">
                        <view class="u-flex u-row-around u-w-100s">
                            <button class="u-reset-button back-btn" @tap="showModal=false">取消</button>
                            <button class="u-reset-button notice-btn" @tap="yuangongSubmit">提交</button>

                        </view>
                    </view>
                </view>
            </u-popup>
            <!-- 数据为空 -->
            <shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无组织成员~">
            </shopro-empty>
            <!-- 更多 -->
            <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc"/>
            <!--未开始提示-->
            <shopro-tishi-popup :cancel_text="'确定'" :title="'温馨提示'" :sub_title="'你的任务还未开始哦，赶紧 去运动吧，加油'" :sure_show="false" ref="weikaishiPopup"></shopro-tishi-popup>
            <!--结束提示-->
            <shopro-tishi-popup  :cancel_text="'确定'" :sub_title="'该任务已结束，任务期间未采集到您的成绩，很抱歉，下次一定记得按时完成任务哦，加油！'"  :title="'非常抱歉！'" :sure_show="false"  ref="wanchengPopup" @sure="closePopup()"></shopro-tishi-popup>

        </view>
    </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
import {mapGetters} from 'vuex';

const imgs = require('@/static/images/tabbar/tabbar_category.png')
export default {
    components: {},
    onShareAppMessage() {
        return {
            title: '为者营销',
            path : `/pages/index/index?id=${this.userInfo.id}`,
            desc : '为者营销,帮助您成功'
        }
    },
    onShareTimeline() {
        return {
            title: '为者营销',
            path : `/pages/index/index?id=${this.userInfo.id}`,
            desc : '为者营销,帮助您成功'
        }
    },
    data() {
        return {
            stickyTop    : 0,
            searchVal    : '',
            isChoosed    : false,
            chengyuanItem: {},
            colorArr     : ['#00BFFF', '#4ff279', '#FFC1C1', '#E066FF', '#FF7F00', '#FF34B3'],
            isEmpty      : false,
            isRefresh    : true,
            isScorll     : false,
            showDetel    : false,
            showModal    : false,
            myGroupList  : [],
            tagList      : [],
            tagchecked   : '',
            position     : "",
            tagindex     : '',
            isedit       : false,
            options1     : [{
                text : '移出',
                style: {
                    backgroundColor: '#f8f8f8',
                    display        : 'flex',
                    justifyContent : 'center',
                    alignItems     : 'center',
                    width          : '120rpx'
                }
            }],
            loadStatus   : 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
            currentPage  : 1,
            lastPage     : 1,
            total        : ''
        };
    },
    computed: {
        ...mapGetters(['isLogin', 'userInfo']),
    },
    created() {
        this.getmyGroupList();
        this.gettagList();
        // 触底监听
        uni.$on('uOnReachBottom', data => {
            if (this.currentPage < this.lastPage) {
                this.currentPage += 1;
                this.getmyGroupList();
            }
        });
    },
    onPullDownRefresh() {
        // this.getmyGroupList();
    },
    onShow() {
        let that    = this;
        this.enable = true;
    },
    onHide() {
        this.enable = false;
    },
    onLoad() {

    },
    mounted() {
    },
    watch  : {},
    methods: {
        openPopup(){
            this.$refs.weikaishiPopup.$refs.deletpopup.open();
        },
        openwanchengPopup(){
            this.$refs.wanchengPopup.$refs.deletpopup.open();
        },
        changeStatus(){
            this.isChoosed = !this.isChoosed;
        },
        gettagList() {
            let that = this;
            that.$http('login.positionStaff', {
                id: that.chengyuanItem.id,
            }).then(res => {
                if (res.code === 1) {
                    that.tagList = res.data.list
                }
            });
        },
        choosetag(tag) {
            if (this.position == tag) {
                this.position = ''
            } else {
                this.position = tag
            }
            this.tagchecked.position = this.position
        },
        settag(tag, index) {
            let tags        = JSON.parse(JSON.stringify(tag))
            this.tagindex   = index
            this.tagchecked = tags;
            console.log("===tagchecked", this.tagchecked)
            this.position  = this.tagchecked.position
            this.showModal = true;
        },
        yuangongSubmit() {
            let params = {
                id      : this.tagchecked.id,
                position: this.position
            }
            let that   = this;
            that.$http('login.setStaff', params).then(res => {
                if (res.code === 1) {
                    that.$u.toast('设置成功')
                    that.$set(this.myGroupList, that.tagindex, that.tagchecked)
                    that.showModal = false
                }
            });
        },
        // 删除
        goodsDelete() {
            let that = this;
            that.$http('login.delStaff', {
                id: that.chengyuanItem.user_id,
            }).then(res => {
                if (res.code === 1) {
                    that.$u.toast('移除成功')
                    this.myGroupList = [];
                    this.currentPage = 1;
                    this.lastPage    = 1;
                    this.loadStatus  = 'loadmore';
                    this.getmyGroupList();
                    this.showDetel = false;
                }
            });

        },
        // 初始化
        init() {
            this.isRefresh = false;
        },
        // 路由跳转
        jump(path, parmas) {
            console.log('-----11111');
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
        // 组织成员列表
        getmyGroupList() {
            let that = this;
            that.$http('login.staff', {
                group_id: that.userInfo.group_id,
                page    : that.currentPage,
                pagesize: 10
            }).then(res => {
                if (res.code === 1) {
                    that.myGroupList = [...that.myGroupList, ...res.data.data];
                    that.isEmpty     = !that.myGroupList.length;
                    that.lastPage    = res.data.last_page;
                    that.loadStatus  = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
                    this.total       = res.data.total
                }
            });
        },
    }
};
</script>

<style lang="scss">
.home-wrap {
    padding: 0 30rpx 30rpx;
}

//nav
page {
    background: #f8f8f8;
}

.userInfo {
    margin-top: 20rpx;
    margin-bottom: 20rpx;

    .userleft {
        .usertitle {
            font-size: 30rpx;
        }
    }

    .userright {
        padding: 4rpx 24rpx;
        background: #0081ff;
        border-radius: 45rpx;
        color: #FFFFFF;
        font-size: 24rpx;
        margin: 0;
    }

}
.tablist{
    width: 100%;
    border-radius:38rpx;
    background: #fff;
    font-size:32rpx;
    .tab-item{
        &.actived{
            background:#3FA897;
            color:#fff;
            border-radius:38rpx;
        }

    }
}
.zixun-item {
    border-radius: 30rpx;
    background: #fff;
    overflow: hidden;

    .zixuntitle {
        color: #333;
        font-size: 32rpx;
    }

    .zixunimg {
        width: 100%;
        height: 180rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .zixuntime {
        color: #333;
        font-size: 32rpx;
    }

    .yichu {
        padding: 16rpx 26rpx;
        border-radius: 34rpx;
        background: #0081ff;
        color: #fff;
    }

    .tag {
        background: #fff;
        color: #5e00ff;
        padding: 10rpx 18rpx;
        font-size: 20rpx;
        border-radius: 34rpx;
        border: 2rpx solid #5e00ff;
    }
    .task-list{

        .task-list-item{
            width: 33%;
            color: #8E8E8E;
        }
        .task-list-items{
            width: 33%;
            font-size: 34rpx;
            color: #010101;
            text-align: center;
        }
    }
}

.detlebtn {
    height: 100%;
    background: #ff0000;
    width: 120rpx;
    border-radius: 20rpx;
}

// 提示
.notice-modal {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 85vw;
    min-height: 358rpx;
    background: #ffffff;
    padding: 30rpx;
    border-radius: 20rpx;

    .notice-title {
        width: 100%;
        font-size: 30rpx;
        font-weight: bold;
        color: #46351b;
        text-align: center;
    }

    .notice-detail {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;
        margin-bottom: 50rpx;
    }

    .back-btn {
        width: 45%;
        height: 70rpx;
        line-height: 70rpx;
        background: #f8f8f8;
        box-shadow: 0 7rpx 8rpx 2rpx #ccc;
        border-radius: 35rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
    }

    .notice-btn {
        width: 45%;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #fff;
        border-radius: 35rpx;
        background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);
        box-shadow: 0 7rpx 8rpx 2rpx #3597F1;
    }
}
.collect-list{
    .choujiangs{
        .zixun-item{
            .user_img{
                width: 16rpx;
                height: 30rpx;
                background:#3FA897;
            }
            .font-green{
                color: #3FA897;
            }
            .font-red{
                color: #FA3E3E;
            }
        }
    }
}



// 弹窗
.modal-box {
    width: 750rpx;
    border-radius: 30rpx 30rpx 0 0;
    background: #fff;

    .modal-head {
        height: 92rpx;
        border-bottom: 1px solid rgba(223, 223, 223, 0.5);
        padding: 0 30rpx;

        .head-title {
            font-size: 32rpx;
            font-weight: bold;
        }
    }

    .modal-content {
        padding: 0 30rpx;

        .into-item {
            width: 24%;
            margin-right: 7rpx;
            padding: 10rpx 0;
            border: 2rpx solid #f3f4f6;
            color: #333;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            &.active {
                color: #fff;
                background: #0081ff;
            }
        }
    }

    .modal-foot {
        font-size: 24rpx;
        padding: 20rpx 0;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        border-top: 1px solid rgba(223, 223, 223, 0.5);

        .back-btn {
            width: 45%;
            height: 70rpx;
            line-height: 70rpx;
            background: #f8f8f8;
            box-shadow: 0 7rpx 8rpx 2rpx #ccc;
            border-radius: 35rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 10rpx;
        }

        .notice-btn {
            width: 45%;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #fff;
            border-radius: 35rpx;
            background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);
            box-shadow: 0 7rpx 8rpx 2rpx #3597F1;
        }
    }
}
::v-deep .u-swipe-action{
    border-radius:30rpx;
}
</style>
